<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/public.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="https://unpkg.com/animate.css@3.5.2/animate.min.css"/>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/unslider.min.js" type="text/javascript" charset="utf-8"></script>

		<style>
			.banner {
				position: relative;
				overflow: auto;
				text-align: center;
			}

			.banner li {
				list-style: none;
			}

			.banner ul li {
				float: left;
			}

			#b06 {
				width: 640px;
			}

			#b06 .dots {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 20px;
			}

			#b06 .dots li {

				display: inline-block;

				width: 10px;

				height: 10px;

				margin: 0 4px;

				text-indent: -999em;

				border: 2px solid #fff;

				border-radius: 6px;

				cursor: pointer;

				opacity: .4;

				-webkit-transition: background .5s, opacity .5s;

				-moz-transition: background .5s, opacity .5s;

				transition: background .5s, opacity .5s;

			}

			#b06 .dots li.active {

				background: #fff;

				opacity: 1;

			}

			#b06 .arrow {
				position: absolute;
				top: 200px;
			}

			#b06 #al {
				left: 15px;
			}

			#b06 #ar {
				right: 15px;
			}
		</style>

	</head>
	<body>
		<!--
			页面的版心宽度  1251px
		-->
		<div id="box">
			<!--头部-->
			<div class="xf_header">
				<!--<header>
					<a href="index.html">
						<img src="img/logo_big01.png" />
					</a>
					<div class="city">
						<img src="img/icon-address.png" />
						<span>武汉市</span>
						<a href="#">切换城市</a>
					</div>
					<div class="nav">
						<a href="#">全部</a>
						<a href="list.html">蛋糕</a>
						<a href="#">下午茶</a>
						<a href="#">手信</a>
						<a href="#">团购预约</a>
						<a href="about.html">关于我们</a>
					</div>
					<div class="link">
						<div class="love"></div>
						<a href="#"> <img src="img/i-search.jpg" /></a>
						<a href="#"><img src="img/i-cart.jpg" /></a>
						<a href="login.html"><img src="img/i-user.jpg" /></a>
						<a href="#">联系我们</a>
					</div>

				</header>-->

			</div>
			<!--头部 end-->

			<!--广告 -->
			<div class="banner" id="b06">
				<ul>
					<li><img src="img/bg.jpg" width="100%" height="680"></li>
					<li><img src="img/bg1.jpg" width="100%" height="680"></li>
					<li><img src="img/bg2.jpg" width="100%" height="680"></li>
					<li><img src="img/bg3.jpg" width="100%" height="680"></li>
				</ul>
				<a href="javascript:void(0);" class="unslider-arrow06 prev">
					<img class="arrow" id="al" src="img/arrowl.png" alt="prev" width="20" height="35">
				</a>
				<a href="javascript:void(0);" class="unslider-arrow06 next">
					<img class="arrow" id="ar" src="img/arrowr.png" alt="next" width="20" height="37">
				</a> 
			</div>
			<!--广告 end-->

			<!-- 商品分类 -->
			<div class="cake_type">
				<div class="left animated">
					<a>
						<img src="img/cake_03.jpg" />
					</a>
					<a>
						<span>AFTERNOON TEA </span>
						<span>下午茶</span>
					</a>
					<p>“一杯咖啡，一份甜点，一抹偷不走的时光”</p>
				</div>
				<div class="center animated">
					<a href="list.html">
						<img src="img/cake_05.jpg" />
					</a>
					<a href="list.html">
						<span>CAKE </span>
						<span>蛋糕</span>
					</a>
					<p>“只有国王才有资格拥有的，享受众人给予的祝福”</p>
				</div>
				<div class="right animated">
					<a>
						<img src="img/cake_07.jpg" />
					</a>
					<a>
						<span>SOUVENIR </span>
						<span>手信</span>
					</a>
					<p>“不在于贵，一情意，一真诚”</p>
				</div>
			</div>
			<!-- 商品分类 end -->

			<!--底部 -->
			<div id="footer">
				
			
			<!--<div class="xf_footer">
				<footer>
					<div class="footer1">
						<div class="msg">
							<a href="#">品牌动态</a>
							<a href="#">生产经营资质</a>
							<a href="#">企业合作</a>
							<a href="#">发票申请</a>
							<a href="#">平台规则</a>
							<a href="#">帮助服务</a>
							<a href="#">联系我们</a>
						</div>
						<div class="tel">
							<a href="#">
								<img src="img/tel_03.jpg" />
								<span>400-999-6665</span>
							</a>
							<a href="#">WEIBO</a>
							<a href="#">WECHAT</a>
							<a href="#">京东商城</a>
						</div>
					</div>
					<div class="footer2">
						<div class="copyright">
							<span>深圳市悦轩商城科技股份有限公司</span>
							<span>粤ICP备16039394号-6 </span>
							<span>京公网安备44030702002399</span>
							<span>公司地址：深圳市龙岗区坂田街道布龙339鸿生源工业园A座5楼</span>
						</div>
					</div>
			</div>-->
			
				</div>
			<!--底部 end-->
		</div>
	</body>
	<!--通过ajax引入header和footer-->
	<script type="text/javascript">
		$(function(){
			$.ajax({
				url:"header.html",
				context:document.body,
				success:function(res){
					//console.log(res);
					$('.xf_header').append(res);
				}
			});
			$("#footer").load('footer.html');
			//监测浏览器滚动
			var h=$(".xf_header").height()+$("#b06 li").height();
			var h2=$(window).height();
			console.log(h);
			console.log(h2);
			$(window).scroll(function() {
				console.log($(document).scrollTop());
				if($(document).scrollTop()>(h-h2)){
					$(".left").addClass("bounceInLeft");
					$(".center").addClass("bounceInDown");
					$(".right").addClass("bounceInRight");
				}else{
					$(".left").removeClass("bounceInLeft");
					$(".center").removeClass("bounceInDown");
					$(".right").removeClass("bounceInRight");
				}
				
				
			});
			
		});
	</script>
	<!-- 轮播图 -->
	<script>
		function imgReload() {
			var imgHeight = 0;
			var wtmp = $("body").width();
			$("#b06 ul li").each(function() {
				$(this).css({
					width: wtmp + "px"
				});
			});
			$(".sliderimg").each(function() {
				$(this).css({
					width: wtmp + "px"
				});
				imgHeight = $(this).height();
			});
		}

		$(window).resize(function() {
			imgReload();
		});

		$(document).ready(function(e) {
			imgReload();
			var unslider06 = $('#b06').unslider({
					dots: true,
					fluid: true
				}),
				data06 = unslider06.data('unslider');

			$('.unslider-arrow06').click(function() {
				var fn = this.className.split(' ')[1];
				data06[fn]();
			});
		});
	</script>

	<!-- 鼠标悬停效果 -->
	<script type="text/javascript">
		$(".cake_type>div").hover(function() {
			$(this).css("opacity", "0.3");
		}, function() {
			$(this).css("opacity", "1");
		});
	</script>
</html>
